<template>
    <div>
        <!--顶部返回-->
        <div class="head-img">
            <img src="../../static/back.png" :style="{width:'60px', position: 'fixed',zIndex:'9999'}"
                 @click="SuperiorList($route.params.fid,$route.params.title)"/>
            <img src="../../static/home.png" :style="{width:'60px',position: 'fixed',right:'0px',zIndex:'9999'}" @click="SuperiorHome"/>
        </div>
       <img :src="commodityDetails.thumbnail" class="top-img">
        <div :style="{padding:'0px 10px'}">
            <h4 :style="{padding:'10px 0px 0 0',marginBottom:0}">{{commodityDetails.title}}</h4>
            <div class="top-title">
                <span>{{commodityDetails.sub_title}}</span>
            </div>
            <div class="card__price">
                ￥<span>{{commodityDetails.price}}</span>
            </div>
            <div class="detail-img">
                <p>商品详情：</p>
                <div v-html="commodityDetails.content" class="content-dist"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Items} from "../api/data";
    export default {
       data(){
         return{
           commodityDetails:''
         }
       },
        methods:{
          SuperiorList(fid,title){
            this.$router.back();
          },
          SuperiorHome(){
            this.$router.push({
              path:`/home`
            })
          }
        },
        mounted(){
            Items(this.$route.query.id).then(res=>{
               console.log(res.data)
               this.commodityDetails = res.data.data
           })
        }
  }
</script>
<style>
    .content-dist p img{
        width: 100% !important;
    }
</style>
<style scoped>
    .detail-img p{
        padding: 10px 0px;
        color: #c5c5c5;
    }
    .card__price{
        margin-top: 10px;
        color: red;
    }
    .card__price span{
        font-size: 24px;
    }
    .top-img{
        width: 100%;
        height: 400px;
    }
    .top-title{
        color: #c5c5c5;
        font-size: 14px;
    }
</style>
